bruhbot/src/pages/my/folders/[...path].tsx

import { GetServerSideProps } from 'next'
import FolderTemplate from '../../../components/templates/Folder'

const Home = ({ path, id, children, }) => {
	return (
		<FolderTemplate
			path={path}
			id={id}
			children={children}
		/>
	)
}

export const getServerSideProps: GetServerSideProps = async ({ query: nextQuery }) => {
	const { q: query } = nextQuery
	return {
		props: {
			query,
			items: [
				{
					name: 'Bruh',
					url: 'https://placehold.it/300',
				}
			],
			children: [
				{
					id: '00000000-0000-0000-000000000001',
					name: 'Foo Folder 1',
					children: [
						{
							id: '00000000-0000-0000-000000000002',
							name: 'Bar Folder 1',
							children: [],
						},
						{
							id: '00000000-0000-0000-000000000003',
							name: 'Bar Folder 2',
							children: [],
						},
						{
							id: '00000000-0000-0000-000000000004',
							name: 'Bar Folder 3',
							children: [
								{
									id: '00000000-0000-0000-000000000005',
									name: 'Baz Folder 1',
									children: [],
								},
								{
									id: '00000000-0000-0000-00000000006',
									name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow',
									children: [],
								},
							],
						},
					],
				},

				{
					id: '10000000-0000-0000-000000000001',
					name: 'Foo Folder 2',
					children: [
						{
							id: '10000000-0000-0000-000000000002',
							name: 'Bar Folder 1',
							children: [],
						},
						{
							id: '10000000-0000-0000-000000000003',
							name: 'Bar Folder 2',
							children: [],
						},
						{
							id: '10000000-0000-0000-000000000004',
							name: 'Bar Folder 3',
							children: [
								{
									id: '10000000-0000-0000-000000000005',
									name: 'Baz Folder 1',
									children: [],
								},
								{
									id: '10000000-0000-0000-00000000006',
									name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow',
									children: [],
								},
							],
						},
					],
				},

				{
					id: '20000000-0000-0000-000000000001',
					name: 'Foo Folder 3',
					children: [
						{
							id: '20000000-0000-0000-000000000002',
							name: 'Bar Folder 1',
							children: [],
						},
						{
							id: '20000000-0000-0000-000000000003',
							name: 'Bar Folder 2',
							children: [],
						},
						{
							id: '20000000-0000-0000-000000000004',
							name: 'Bar Folder 3',
							children: [
								{
									id: '20000000-0000-0000-000000000005',
									name: 'Baz Folder 1',
									children: [],
								},
								{
									id: '20000000-0000-0000-00000000006',
									name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow',
									children: [],
								},
							],
						},
					],
				},
				{
					id: '30000000-0000-0000-000000000001',
					name: 'Foo Folder 4',
					children: [
						{
							id: '30000000-0000-0000-000000000002',
							name: 'Bar Folder 1',
							children: [],
						},
						{
							id: '30000000-0000-0000-000000000003',
							name: 'Bar Folder 2',
							children: [],
						},
						{
							id: '30000000-0000-0000-000000000004',
							name: 'Bar Folder 3',
							children: [
								{
									id: '30000000-0000-0000-000000000005',
									name: 'Baz Folder 1',
									children: [],
								},
								{
									id: '30000000-0000-0000-00000000006',
									name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow',
									children: [],
								},
							],
						},
					],
				},

				{
					id: '40000000-0000-0000-000000000001',
					name: 'Foo Folder 5',
					children: [
						{
							id: '40000000-0000-0000-000000000002',
							name: 'Bar Folder 1',
							children: [],
						},
						{
							id: '40000000-0000-0000-000000000003',
							name: 'Bar Folder 2',
							children: [],
						},
						{
							id: '40000000-0000-0000-000000000004',
							name: 'Bar Folder 3',
							children: [
								{
									id: '40000000-0000-0000-000000000005',
									name: 'Baz Folder 1',
									children: [],
								},
								{
									id: '40000000-0000-0000-00000000006',
									name: 'Baz Folder 2 With A Very Long Name That Causes Overflow Somehow',
									children: [],
								},
							],
						},
					],
				},
			],
		},
	}
}

export default Home